<template>
	<view>
		<view class="msg_text">
			<button :class="[tagStyle ? tagStyle : 'tag']" @click="getCode" :disabled="gain" :style="{
					 backgroundColor: bgColor ? bgColor : bgColorCom(bgColor),
					 color:color
				 }">
				{{ gain ? `${delay}秒后重新获取` : '获取验证码' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				gain: false,
				delay: 60
			}
		},
		props: {
			tagStyle: {
				type: Object,
			},
			colorType: {
				type: String
			},
			bgColor: {
				type: String,
				default: "",
			},
			color: {
				type: String,
				default: "#c4ccd4"
			}
		},
		methods: {
			getCode() {
				this.gain = true;
				let time = setInterval(() => {
					this.delay -= 1
					if (this.delay == 0) {
						clearInterval(time);
						this.gain = false;
						this.delay = 60
					}
				}, 1000);
				this.$emit('getCode')
			},
			bgColorCom(type) {
				let color = "#eee"
				switch (type) {
					case 'primary':
						color = '#1f89ec'
						break
				}
				return 	color
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		padding: 8rpx 12rpx;
		border: none;
		background-color: #eee;
		display: inline-block;
		border-radius: 6rpx;
		box-sizing: border-box;
		line-height: 35rpx;
		height: 50rpx;
		font-size: 20rpx
	}
</style>